<template>
    <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
        :width="720"
         :visible="visibleDetailedShow" 
         title="试卷详情" 
         @ok="handleOk" 
         :confirmLoading="confirmLoading"
         @cancel="visibleDetailedShow = false">
            <!-- <a-spin size="large" :spinning="spinning"> -->
                <div v-if="visibleDetailedShow" class="paper-details">
                    <p>{{ testPaper.fsjmc }}</p>
                    <!-- <p>试卷类型：{{ testPaper.fsjlx }}</p> -->
                </div>
                <div class="big-question" v-if="singleChoiceList.length">
                    <span class="title-test-text" v-if="testPaper.fdanxtdbt">{{testPaper.fdanxtdbt}}</span>
                    <span class="title-test-text" v-else>一、单选题{{singleChoiceList.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in singleChoiceList" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-radio-group
                                disabled
                                v-for="(nape,Nindex) in item.sjtmxxList" 
                                :key="nape.id"
                                v-model:value="item.selectId"
                                @change="radioChange($event,nape,item)"
                                >
                                    <a-radio
                                    style="display:block;height:30px;lineHeight:30px" 
                                    :value="nape.id"
                                    >
                                    {{nape.fsjtmxx}}
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                                    </a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="big-question" v-if="multipleChoice.length">
                    <span class="title-test-text" v-if="testPaper.fduoxtdbt">{{testPaper.fduoxtdbt}}</span>
                    <span class="title-test-text" v-else>二、多选题{{multipleChoice.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in multipleChoice" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-checkbox-group
                                disabled
                                v-for="(nape,Nindex) in item.sjtmxxList" 
                                :key="nape.id" 
                                v-model:checkbox="item.selectArr"
                                @change="checkboxChange($event,nape,item)"
                                >
                                    <a-checkbox :value="nape.id">
                                        {{nape.fsjtmxx}}
                                        
                                    </a-checkbox>
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh))+ -->
                                    <br/>
                                </a-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="big-question" v-if="determineList.length">
                    <span class="title-test-text" v-if="testPaper.fpandtdbt">{{testPaper.fpandtdbt}}</span>
                    <span class="title-test-text" v-else>三、判断题{{determineList.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in determineList" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-radio-group
                                disabled
                                v-for="(nape,Nindex) in item.sjtmxxList" 
                                :key="nape.id"
                                v-model:value="item.selectId"
                                @change="radioChange($event,nape,item)"
                                >
                                    <a-radio
                                    style="display:block;height:30px;lineHeight:30px" 
                                    :value="nape.id"
                                    >
                                    {{nape.fsjtmxx}}
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                                    </a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="big-question" v-if="subjectiveQuestions.length">
                    <span class="title-test-text" v-if="testPaper.fzhugtdbt">{{testPaper.fzhugtdbt}}</span>
                    <span class="title-test-text" v-else>四、主观题{{subjectiveQuestions.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in subjectiveQuestions" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <div>
                                <!-- <a-textarea v-model:value="item.answer" placeholder="请输入答案" :rows="5" /> -->
                                答：{{ item.fzgtnr }}
                            </div>
                        </div>
                    </div>
                    
                </div>
            <!-- </a-spin> -->
        </a-modal>
    </div>
</template>
<script>
import {detailedList} from './service/index'
export default {
    components:{
    },
    props:{
        detailFsjid:{
            type:String,
            default:'',
            require:false
        }
    },
    data(){
        return{
            visibleDetailedShow:false,
            confirmLoading:false,
            testPaper:{},
            singleChoiceList:[],//单选
            multipleChoice:[],//多选题
            determineList:[],//判断题
            subjectiveQuestions:[],//主观题

        }
    },
    watch:{
        detailFsjid(newval,oldVal){
            this.spinning = true
            //console.log('获取到试卷id',newval)
            this.getData({id:newval})
        }
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        getData(val){
            detailedList({id:val.id}).then(res=>{
                if(res.code == 200 ){
                    //console.log('获取到试卷内容2',res)
                    this.testPaper = res.result.sjjbxx
                    // this.singleChoiceList = res.result.danxList
                    // this.determineList = res.result.pdtList
                    this.singleChoiceList = []
                    this.determineList = []
                    this.multipleChoice = []
                    for (let item of res.result.danxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='sjtmxxList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfzqda==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.singleChoiceList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.singleChoiceList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    for (let item of res.result.pdtList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.determineList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.determineList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    res.result.duoxList = res.result.duoxList.map(i=>{return{selectArr:[],...i}} )
                    for (let item of res.result.duoxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='sjtmxxList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfzqda==='是'){
                                        item.selectArr.push(item[key][nape].id)
                                    }
                                    let arr = this.multipleChoice.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.multipleChoice.push(item)
                                    }
                                }
                            }
                        }
                    }
                    this.subjectiveQuestions = res.result.zhugList
                }
            })
        },
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        radioChange(val,nape,item){//单选

        },
        checkboxChange(val,nape,item){//多选

        },
        handleOk(){

        },
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */
.observerLibrary-increase{
    .ant-modal-title{
        font-weight: 600;
    }
    .ant-modal-header{
        background: #5ca3e5;
    }
    .ant-upload-list{
        display: none !important;
    }
    .ant-modal-footer .ant-btn-primary{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
    .paper-details{
        display: flex;
        justify-content: space-evenly;
        font-size: 20px;
        font-weight: 600;
    }
    .big-question{
        margin: 20px 0;
    }
    .title-test-text{
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 10px;
    }
    .ant-modal-content{
        width: 1000px !important;
    }
    .ant-radio-group,.ant-checkbox-group {
        display: block !important;
    }
    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
        border-color:#2F54EB !important;
    }
    .ant-radio-disabled .ant-radio-inner:after {
        background-color: #2F54EB !important;
    }
}
</style>